import React, {useEffect, useState} from "react";
import {get} from "../../../utils/get";
import {Table, Tag, Space, Button,Modal,Form, Input} from "antd";
import {post} from "../../../utils/post";
const { Column } = Table;

const ResourceList= ()=>{
    const token = localStorage.getItem('TOKEN')
    const[data,setData]=useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    useEffect(async ()=>{
        let res = await get('/syspermission/list',token)
        console.log(res)
        if(res.data.code===0)
        {
            const {list} = res.data.page
            let permission = list.map(item=>{
                const {id,description,method,resourceId,isDeleted}=item
                return {
                    key:id,
                    resourceId,
                    description,
                    method,
                    // isDeleted:!!isDeleted
                    isDeleted
                }
            })
            console.log(permission)
            setData(permission)
        }

    },[])
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const onFinish = async (values) => {
        const {method,description}=values
        const token =localStorage.getItem('TOKEN')
        const res=await post('/syspermission/save',{
            method,
            description
        },token)
        console.log(res)
        setIsModalVisible(false)
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const renderForm = ()=>{
        return (
            <Form name="basic" labelCol={{span: 8,}}
                wrapperCol={{span: 16}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="Method"
                    name="method"
                    rules={[
                        {
                            required: true,
                            message: '此为必填项',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="描述"
                    name="description"
                    rules={[
                        {
                            required: true,
                            message: '此为必填项',
                        },
                    ]}
                >
                    <Input></Input>
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        )
    }

    const addResource=()=>{
        setIsModalVisible(true)
    }
    return(
        <>
            <Button type="primary" onClick={addResource}  >
                新增资源
            </Button>
            <Modal title="新增资源" visible={isModalVisible} footer={null} onCancel={handleCancel}>
                {
                    renderForm()
                }
            </Modal>
            <Table dataSource={data}>
                <Column title="method" dataIndex={"method"} key={"method"}/>
                <Column title="描述" dataIndex={"description"} key={"description"}/>
                <Column title="是否删除" dataIndex={"isDeleted"} key={"isDeleted"}/>
            </Table>
        </>
    )
}
export default ResourceList;
